<template>
	<z-paging-swiper>
		<template #top>
			<cl-navbar :title="$t('addressbook.index.title')" autoBack placeholder>
				<template slot="right" v-if="current === 1">
					<text style="font-size: 28rpx;" @click="manageClick">{{$t("addressbook.friend_group.manage")}}</text>
					<!-- <image src="/static/icon/addfriend.svg" style="width: 40rpx;height: 40rpx;"></image> -->
				</template>
			</cl-navbar>
			<view class="searchview">
				<u-search height="64rpx" :showAction="false" :clearabled="false" bgColor="#1e1f30" :inputStyle="{fontSize:'24rpx'}" :placeholder="$t('commonality.search')" @input="searchInput"></u-search>
			</view>
			<view class="tagView">
				<view class="tagView__item" :class="{ 'opacity1': current === 0 }" @click="tagclick(0)">
					<image src="/static/icon/haoyou.svg" class="tagView__item__image"></image>
					<text class="tagView__item__text">{{$t("addressbook.index.friend")}}</text>
				</view>
				<view class="tagView__item" :class="{ 'opacity1': current === 1 }" @click="tagclick(1)">
					<image src="/static/icon/fenzu.svg" class="tagView__item__image"></image>
					<text class="tagView__item__text">{{$t("addressbook.friend_group.title")}}</text>
				</view>
				<view class="tagView__item"  :class="{ 'opacity1': current === 2 }" @click="tagclick(2)">
					<image src="/static/icon/qunliao.svg" class="tagView__item__image"></image>
					<text class="tagView__item__text">{{$t("index.index.group")}}</text>
				</view>
			</view>
		</template>
		<swiper class="swiper" :current="current" @animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item">
				<friendList :currentIndex="current" ref="friendList" :searchval = 'searchval' :tabIndex="0"></friendList>
			</swiper-item>
			<swiper-item class="swiper-item">
				<friendGroup :currentIndex="current" ref="friendGroup" :searchval = 'searchval' :tabIndex="1"></friendGroup>
			</swiper-item>
			<swiper-item class="swiper-item">
				<groupList :currentIndex="current" ref="groupList" :searchval = 'searchval' :tabIndex="2"></groupList>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script>
	
	import {
		mapState
	} from 'vuex'
	import groupList from '@/pagesA/group/components/group_list.vue'
	import friendList from '@/pagesA/addressbook/components/friend_list.vue'
	import friendGroup from '@/pagesA/addressbook/components/friend_group.vue'
	export default {
		name: 'addressbook',
		data() {
			return {
				itemArrs: [],
				searchval:'',
				
				current: 0, // tabs组件的current值，表示当前活动的tab选项
			}
		},
		components:{
			groupList,
			friendGroup,
			friendList
		},
		computed: {
			// ...mapState({
			// 	friendList: state => state.friends.friendList,
			// 	friendOnline: state => state.friends.friendOnline,
			// }),
			// newData(){
			// 	if(this.friendList.length){
			// 		let newdata = this.friendList.filter(item => {
			// 			// 根据名字筛选
			// 			if (this.searchval && item.friend_remark.indexOf(this.searchval) === -1 && item.nick_name.indexOf(this.searchval) === -1) {
			// 				return false;
			// 			}
			// 			return true;
			// 		});
			// 		return this.conversion(newdata, 'friend_remark','nick_name')
			// 	}
			// 	return {
			// 		indexList: [],
			// 		itemArr: []
			// 	}
			// }
		},
		methods: {
			// conversion,
			searchInput(e){
				uni.$u.debounce(()=>{
					this.searchval = e
				}, 500,false)
			},
			tagclick(index){
				this.current = index
			},
			manageClick(){
				this.$Router.push({
					name: 'friend_group_manage'
				});
			},
			// swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				// this.$refs.tabs.unlockDx();
			},
			addFriend() {
				this.$Router.push({
					name: 'add_friend'
				});
			},
			gopage(name){
				this.$Router.push({
					name
				});
			},
			// goFriend(item){
			// 	this.$Router.push({
			// 		name: 'friend_details',
			// 		params: item
			// 	});
			// 	console.log(item.friend_idx);
			// }
		},
	};
</script>

<style scoped lang="scss">
	
	.swiper {
		height: 100%;
	}
	.list-cell {
		padding: 10px 24rpx;
		overflow: hidden;
		color: #fff;
		font-size: 14px;
		line-height: 24px;
		background-color: #121325;
	}

	.searchview {
		margin: 20rpx 30rpx;
		background-color: #1e1f30;
		border-radius: 60rpx;
		padding-right: 20rpx;
	}
	.tagView{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 30rpx 0;
		
		&__item{
			display: flex;
			flex-direction: column;
			opacity: 0.5;
			&__image{
				width: 60rpx;
				height: 60rpx;
				border-radius: 17rpx;
			}
			&__text{
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	.opacity1{
		opacity: 1;
	}
	
</style>